<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biometric</title>
    <link rel="stylesheet" href="./angular-material/angular-material.min.css"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
    <script src="./angular/angular.min.js"></script>
    <script src="./angular-material/angular-material.min.js"></script>
    <script src="./angular-animate/angular-animate.min.js"></script>
    <script src="./angular-aria/angular-aria.min.js"></script>
    <script src="./angular-messages/angular-messages.min.js"></script>
    <script src="./blueimp-load-image/js/load-image.all.min.js"></script>
    <script src="./module.js"></script>
    <script src="./faceFac.js"></script>
    <script src="./myFac.js"></script>
    <script src="./urlCnst.js"></script>
    <script src="./ctrl.js"></script>

</head>
<body style="overflow-y: hidden !important" ng-controller="myCtrl" layout="column">
<md-content style="overflow-y: auto">
    <input type="file" id="file" accept="image/png, image/jpeg, image/gif" style="display: none"
           onchange="angular.element(this).scope().detect(this)"/>
    <md-content layout-padding>
        <div flex layout="column" layout-align="spacebetween center">
            <div layout="column" layout-align="spacebetween center" >
                <md-radio-group ng-model="isCam" ng-init="isCam='0'">
                    <md-radio-button value="0" class="md-primary">choose a img</md-radio-button>
                    <md-radio-button value="1">take a shot</md-radio-button>
                </md-radio-group>
            </div>
            <video id="video" ng-hide="isCam==='0'"></video>
            <md-button ng-if="isCam==='0'" class="md-raised md-primary" ng-click="chooseImg()">
                choose a img
            </md-button>
            <md-button ng-if="isCam==='1'" class="md-raised md-primary" ng-click="takeShot()">
                take a shot
            </md-button>
            <div layout-align="begin begin">
                <div> face_token: {{token}}</div>
                <div> gender: {{face.gender.value}}</div>
                <div> age: {{face.age.value}}</div>
                <div> smile: {{face.smile.value>face.smlie.threshold?"yes":"no"}}</div>
                <div> glass: {{face.glass.value}}</div>
                <div> ethnicity: {{face.ethnicity.value}}</div>
                <div> beauty:
                    <ul>
                        <li ng-repeat="(key,val) in face.beauty">
                            {{key}}:{{val}}
                        </li>
                    </ul>
                </div>
                <div> emotion:
                    <ul>
                        <li ng-repeat="(key,val) in face.emotion ">
                            {{key}}:{{val}}
                        </li>
                    </ul>
                </div>
                <br/>
            </div>
            <canvas id="cv">
            </canvas>
        </div>
        <div layout="column" layout-align="spacebetween center" ng-show="token">
            <md-radio-group ng-model="isSearch" ng-init="isSearch='0'">
                <md-radio-button value="0" class="md-primary">search</md-radio-button>
                <md-radio-button value="1">add</md-radio-button>
            </md-radio-group>
        </div>
        <div ng-show="token&&isSearch==='0'" flex layout="column" layout-align="spacebetween center">
            <md-button class="md-raised md-primary" ng-click="search(token)">
                search face set
            </md-button>
            <md-content>
                <md-card ng-repeat="maybe in maybes">
                    <span>confidence:{{maybe.confidence}}</span><br/>
                    <span>face_token:{{maybe.face_token}}</span><br/>
                    <span>user_id:{{maybe.user_id}}</span>
                </md-card>
            </md-content>
        </div>
        <div ng-show="token&&isSearch==='1'" flex layout="column" layout-align="spacebetween center">
            <md-button class="md-raised md-primary" ng-click="setUserId(token,username)">
                set username
            </md-button>
            <md-input-container>
                <label>username</label>
                <input type="text" ng-model="username"><br/>
            </md-input-container>
            <md-button class="md-raised md-primary" ng-click="addFace(token)">
                add to face set
            </md-button>
        </div>
    </md-content>
</md-content>
</body>
</html> 
